<template>
  <div class="bank-card">
    <el-card>
      <div slot="header" class="clearfix">
        <span class="page-title"><i class="el-icon-credit-card"></i> 银行卡管理</span>
        <div class="header-actions">
          <el-button
            v-if="!hasBankCard"
            class="add-btn"
            type="primary"
            icon="el-icon-plus"
            @click="showAddDialog">
            <span class="btn-text">添加银行卡</span>
          </el-button>
          <el-button
            v-if="hasBankCard"
            class="edit-btn"
            type="warning"
            icon="el-icon-edit"
            @click="showEditDialog">
            <span class="btn-text">编辑银行卡</span>
          </el-button>
          <el-button
            class="refresh-btn"
            type="success"
            icon="el-icon-refresh"
            @click="refreshData">
            <span class="btn-text">刷新数据</span>
          </el-button>
          <!-- <el-button
            class="debug-btn"
            type="info"
            icon="el-icon-info"
            @click="debugUserInfo">
            <span class="btn-text">调试信息</span>
          </el-button> -->
        </div>
      </div>

      <!-- 银行卡信息展示 -->
      <div class="bank-card-display" v-if="hasBankCard">
        <div class="card-container">
          <div class="bank-card-item">
            <div class="card-header">
              <div class="bank-logo">
                <i class="el-icon-bank-card"></i>
              </div>
              <div class="bank-name">{{ bankCardData.bankName }}</div>
              <div class="card-type">{{ bankCardData.cardType }}</div>
            </div>
            <div class="card-number">
              <span class="card-number-masked">{{ formatCardNumber(bankCardData.cardNumber) }}</span>
            </div>
            <div class="card-footer">
              <div class="card-holder">
                <span class="label">持卡人：</span>
                <span class="value">{{ bankCardData.cardHolder }}</span>
              </div>
            </div>
          </div>
        </div>

        <!-- 银行卡详细信息 -->
        <div class="card-details">
          <h3>银行卡详细信息</h3>
          <el-row :gutter="20">
            <el-col :span="12">
              <div class="detail-item">
                <label>银行名称：</label>
                <span>{{ bankCardData.bankName || '无' }}</span>
              </div>
            </el-col>
            <el-col :span="12">
              <div class="detail-item">
                <label>卡号：</label>
                <span class="card-number-full">
                  <span v-if="showFullCardNumber">{{ bankCardData.cardNumber || '无' }}</span>
                  <span v-else>{{ maskCardNumber(bankCardData.cardNumber) || '无' }}</span>
                </span>
                <el-button
                  style="margin-left: 10px;"
                  size="mini"
                  type="text"
                  icon="el-icon-view"
                  @click="toggleCardNumberVisibility">
                  {{ showFullCardNumber ? '隐藏' : '显示' }}
                </el-button>
              </div>
            </el-col>
          </el-row>
          <el-row :gutter="20">
            <el-col :span="12">
              <div class="detail-item">
                <label>持卡人：</label>
                <span>{{ bankCardData.cardHolder || '无' }}</span>
              </div>
            </el-col>
            <el-col :span="12">
              <div class="detail-item">
                <label>卡类型：</label>
                <span>{{ bankCardData.cardType || '无' }}</span>
              </div>
            </el-col>
          </el-row>
          <el-row :gutter="20">
            <el-col :span="12">
              <div class="detail-item">
                <label>开户行：</label>
                <span>{{ bankCardData.bankBranch || '无' }}</span>
              </div>
            </el-col>
            <el-col :span="12">
            </el-col>
          </el-row>
          <el-row :gutter="20">
            <el-col :span="12">
              <div class="detail-item">
                <label>添加时间：</label>
                <span>{{ bankCardData.createTime || '无' }}</span>
              </div>
            </el-col>
            <el-col :span="12">
              <div class="detail-item">
                <label>更新时间：</label>
                <span>{{ bankCardData.updateTime || '无' }}</span>
              </div>
            </el-col>
          </el-row>
        </div>
      </div>

      <!-- 无银行卡提示 -->
      <div class="no-card-tip" v-else>
        <div class="tip-content">
          <i class="el-icon-bank-card tip-icon"></i>
          <h3>暂未添加银行卡</h3>
          <p>请添加一张银行卡用于提现操作</p>
          <el-button type="primary" icon="el-icon-plus" @click="showAddDialog">
            添加银行卡
          </el-button>
        </div>
      </div>
    </el-card>

    <!-- 添加银行卡对话框 -->
    <el-dialog
      title="添加银行卡"
      :visible.sync="addDialogVisible"
      width="600px"
      custom-class="action-dialog"
      :close-on-click-modal="false">

      <div class="form-section">
        <div class="section-title">
          <i class="el-icon-credit-card"></i>
          <span>银行卡信息</span>
        </div>

        <el-form :model="addForm" :rules="addRules" ref="addForm" label-width="120px" class="action-form">
          <el-form-item label="银行名称" prop="bankName">
            <el-select v-model="addForm.bankName" placeholder="请选择银行" style="width: 100%" clearable>
              <el-option
                v-for="bank in bankList"
                :key="bank.value"
                :label="bank.label"
                :value="bank.value">
              </el-option>
            </el-select>
            <div class="form-tip">
              <i class="el-icon-info"></i>
              请选择银行卡所属银行
            </div>
          </el-form-item>

          <el-form-item label="卡号" prop="cardNumber">
            <el-input
              v-model="addForm.cardNumber"
              placeholder="请输入银行卡号"
              maxlength="23"
              @input="formatCardNumberInput"
              clearable>
            </el-input>
            <div class="form-tip">
              <i class="el-icon-info"></i>
              请输入16-19位银行卡号，系统会自动格式化
            </div>
          </el-form-item>

          <el-form-item label="持卡人" prop="cardHolder">
            <el-input v-model="addForm.cardHolder" placeholder="请输入持卡人姓名" clearable></el-input>
            <div class="form-tip">
              <i class="el-icon-info"></i>
              请输入银行卡持卡人的真实姓名
            </div>
          </el-form-item>

          <el-form-item label="卡类型" prop="cardType">
            <el-select v-model="addForm.cardType" placeholder="请选择卡类型" style="width: 100%" clearable>
              <el-option label="储蓄卡" value="储蓄卡"></el-option>
              <el-option label="信用卡" value="信用卡"></el-option>
              <el-option label="借记卡" value="借记卡"></el-option>
            </el-select>
            <div class="form-tip">
              <i class="el-icon-info"></i>
              请选择银行卡类型
            </div>
          </el-form-item>

          <el-form-item label="开户行" prop="bankBranch">
            <el-input v-model="addForm.bankBranch" placeholder="请输入开户行信息" clearable></el-input>
            <div class="form-tip">
              <i class="el-icon-info"></i>
              请输入具体的开户行名称
            </div>
          </el-form-item>
        </el-form>

        <el-alert
          title="银行卡说明"
          type="info"
          description="添加的银行卡将用于提现操作，请确保信息准确无误。每个区域代理只能添加一张银行卡。"
          show-icon
          :closable="false"
          style="margin-top: 16px;">
        </el-alert>
      </div>

      <div slot="footer" class="dialog-footer">
        <el-button @click="addDialogVisible = false">
          <i class="el-icon-close"></i>
          取消
        </el-button>
        <el-button type="primary" @click="handleAddSubmit" :loading="addLoading">
          <i class="el-icon-check"></i>
          添加
        </el-button>
      </div>
    </el-dialog>

    <!-- 编辑银行卡对话框 -->
    <el-dialog
      title="编辑银行卡"
      :visible.sync="editDialogVisible"
      width="600px"
      custom-class="action-dialog"
      :close-on-click-modal="false">

      <div class="form-section">
        <div class="section-title">
          <i class="el-icon-edit"></i>
          <span>编辑银行卡信息</span>
        </div>

        <el-form :model="editForm" :rules="editRules" ref="editForm" label-width="120px" class="action-form">
          <el-form-item label="银行名称" prop="bankName">
            <el-select v-model="editForm.bankName" placeholder="请选择银行" style="width: 100%" clearable>
              <el-option
                v-for="bank in bankList"
                :key="bank.value"
                :label="bank.label"
                :value="bank.value">
              </el-option>
            </el-select>
            <div class="form-tip">
              <i class="el-icon-info"></i>
              请选择银行卡所属银行
            </div>
          </el-form-item>

          <el-form-item label="卡号" prop="cardNumber">
            <el-input
              v-model="editForm.cardNumber"
              placeholder="请输入银行卡号"
              maxlength="23"
              @input="formatCardNumberInput"
              clearable>
            </el-input>
            <div class="form-tip">
              <i class="el-icon-info"></i>
              请输入16-19位银行卡号，系统会自动格式化
            </div>
          </el-form-item>

          <el-form-item label="持卡人" prop="cardHolder">
            <el-input v-model="editForm.cardHolder" placeholder="请输入持卡人姓名" clearable></el-input>
            <div class="form-tip">
              <i class="el-icon-info"></i>
              请输入银行卡持卡人的真实姓名
            </div>
          </el-form-item>

          <el-form-item label="卡类型" prop="cardType">
            <el-select v-model="editForm.cardType" placeholder="请选择卡类型" style="width: 100%" clearable>
              <el-option label="储蓄卡" value="储蓄卡"></el-option>
              <el-option label="信用卡" value="信用卡"></el-option>
              <el-option label="借记卡" value="借记卡"></el-option>
            </el-select>
            <div class="form-tip">
              <i class="el-icon-info"></i>
              请选择银行卡类型
            </div>
          </el-form-item>

          <el-form-item label="开户行" prop="bankBranch">
            <el-input v-model="editForm.bankBranch" placeholder="请输入开户行信息" clearable></el-input>
            <div class="form-tip">
              <i class="el-icon-info"></i>
              请输入具体的开户行名称
            </div>
          </el-form-item>
        </el-form>

        <el-alert
          title="编辑说明"
          type="warning"
          description="编辑银行卡信息后，新的信息将立即生效，请确保信息准确无误。"
          show-icon
          :closable="false"
          style="margin-top: 16px;">
        </el-alert>
      </div>

      <div slot="footer" class="dialog-footer">
        <el-button @click="editDialogVisible = false">
          <i class="el-icon-close"></i>
          取消
        </el-button>
        <el-button type="primary" @click="handleEditSubmit" :loading="editLoading">
          <i class="el-icon-check"></i>
          保存
        </el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>
import { addBankCard, editBankCard, getBankCardDetail, getCurrentCard } from '@/api/aggregation'
import { getToken } from '@/utils/auth'

export default {
  name: 'AgentBankCard',
  data() {
    return {
      loading: false,
      hasBankCard: false,
      bankCardData: {},
      showFullCardNumber: false, // 默认隐藏卡号
      // 添加对话框
      addDialogVisible: false,
      addLoading: false,
      addForm: {
        bankName: '',
        cardNumber: '',
        cardHolder: '',
        cardType: '',
        bankBranch: ''
      },
      addRules: {
        bankName: [
          { required: true, message: '请选择银行名称', trigger: 'change' }
        ],
        cardNumber: [
          { required: true, message: '请输入银行卡号', trigger: 'blur' },
          {
            validator: (rule, value, callback) => {
              if (!value) {
                callback()
                return
              }
              // 去除空格后验证
              const cleanValue = value.replace(/\s/g, '')
              if (!/^\d{16,19}$/.test(cleanValue)) {
                callback(new Error('银行卡号格式不正确'))
              } else {
                callback()
              }
            },
            trigger: 'blur'
          }
        ],
        cardHolder: [
          { required: true, message: '请输入持卡人姓名', trigger: 'blur' }
        ],
        cardType: [
          { required: true, message: '请选择卡类型', trigger: 'change' }
        ],
        bankBranch: [
          { required: true, message: '请输入开户行信息', trigger: 'blur' }
        ]
      },
      // 编辑对话框
      editDialogVisible: false,
      editLoading: false,
      editForm: {
        id: null,
        bankName: '',
        cardNumber: '',
        cardHolder: '',
        cardType: '',
        bankBranch: ''
      },
      editRules: {
        bankName: [
          { required: true, message: '请选择银行名称', trigger: 'change' }
        ],
        cardNumber: [
          { required: true, message: '请输入银行卡号', trigger: 'blur' },
          {
            validator: (rule, value, callback) => {
              if (!value) {
                callback()
                return
              }
              // 去除空格后验证
              const cleanValue = value.replace(/\s/g, '')
              if (!/^\d{16,19}$/.test(cleanValue)) {
                callback(new Error('银行卡号格式不正确'))
              } else {
                callback()
              }
            },
            trigger: 'blur'
          }
        ],
        cardHolder: [
          { required: true, message: '请输入持卡人姓名', trigger: 'blur' }
        ],
        cardType: [
          { required: true, message: '请选择卡类型', trigger: 'change' }
        ],
        bankBranch: [
          { required: true, message: '请输入开户行信息', trigger: 'blur' }
        ]
      },
      // 银行列表
      bankList: [
        { label: '中国工商银行', value: '中国工商银行' },
        { label: '中国建设银行', value: '中国建设银行' },
        { label: '中国农业银行', value: '中国农业银行' },
        { label: '中国银行', value: '中国银行' },
        { label: '交通银行', value: '交通银行' },
        { label: '招商银行', value: '招商银行' },
        { label: '浦发银行', value: '浦发银行' },
        { label: '民生银行', value: '民生银行' },
        { label: '兴业银行', value: '兴业银行' },
        { label: '光大银行', value: '光大银行' },
        { label: '华夏银行', value: '华夏银行' },
        { label: '中信银行', value: '中信银行' },
        { label: '平安银行', value: '平安银行' },
        { label: '广发银行', value: '广发银行' },
        { label: '中国邮政储蓄银行', value: '中国邮政储蓄银行' }
      ]
    }
  },
  mounted() {
    this.loadData()
  },
  methods: {
    // 加载银行卡数据
    async loadData() {
      this.loading = true
      try {
        Logger.log('=== 加载区域代理银行卡数据 ===')

        // 检查token是否存在
        const token = getToken()
        if (!token) {
          Logger.error('❌ 没有找到token，用户未登录')
          this.$message.error('用户未登录，请重新登录')
          this.$router.push('/aggregation-login')
          return
        }

        Logger.log('✅ 找到token:', token.substring(0, 20) + '...')

        // 使用getCurrentCard获取当前登录用户的银行卡信息
        Logger.log('=== 使用getCurrentCard获取银行卡信息 ===')
        const response = await getCurrentCard()
        Logger.log('getCurrentCard响应:', response)

        if (response.code === 0 && response.data) {
          const cardData = response.data
          Logger.log('银行卡数据:', cardData)

          // 映射后端字段到前端显示字段
          this.bankCardData = {
            id: cardData.id,
            userId: cardData.userId,
            bankName: cardData.bankName || '未知银行',
            cardHolder: cardData.name || '未知',
            cardNumber: cardData.cardNo || '',
            cardType: cardData.cardType || '储蓄卡',
            bankBranch: cardData.bankBranch || '未知',
            phone: cardData.phone || '未知',
            createTime: cardData.createTime || '',
            updateTime: cardData.updateTime || ''
          }
          this.hasBankCard = true
          Logger.log('=== 银行卡数据加载成功 ===')
          Logger.log('渲染的银行卡数据:', this.bankCardData)
        } else {
          this.hasBankCard = false
          Logger.log('=== 未找到银行卡数据 ===')
          Logger.log('API响应:', response)
          if (response.msg) {
            this.$message.info(response.msg || '未绑定银行卡')
          }
        }
      } catch (error) {
        Logger.error('=== 加载银行卡数据失败 ===')
        Logger.error('错误信息:', error)
        Logger.error('错误详情:', error.response?.data)
        this.hasBankCard = false

        // 如果是404或未找到银行卡，不显示错误，只显示提示
        if (error.response?.status === 404 || error.response?.data?.code === 404) {
          this.$message.info('未绑定银行卡')
        } else {
          this.$message.error('加载银行卡数据失败: ' + (error.response?.data?.msg || error.message))
        }
      } finally {
        this.loading = false
      }
    },

    // 获取模拟银行卡数据
    getMockBankCardData() {
      return {
        id: 1,
        bankName: '中国工商银行',
        cardNumber: '6222021234567890123',
        cardHolder: '张三',
        cardType: '储蓄卡',
        bankBranch: '工商银行北京朝阳支行',
        phone: '13800138001',
        status: 1, // 1-正常 2-冻结
        createTime: '2025-09-29 10:30:00',
        updateTime: '2025-09-29 10:30:00'
      }
    },

    // 显示添加对话框
    showAddDialog() {
      this.addDialogVisible = true
      this.resetAddForm()
    },

    // 显示编辑对话框
    showEditDialog() {
      this.editForm = {
        id: this.bankCardData.id,
        bankName: this.bankCardData.bankName,
        cardNumber: this.bankCardData.cardNumber, // 已经映射过的字段
        cardHolder: this.bankCardData.cardHolder,   // 已经映射过的字段
        cardType: this.bankCardData.cardType,
        bankBranch: this.bankCardData.bankBranch
      }
      this.editDialogVisible = true
    },

    // 重置添加表单
    resetAddForm() {
      this.addForm = {
        bankName: '',
        cardNumber: '',
        cardHolder: '',
        cardType: '',
        bankBranch: ''
      }
      if (this.$refs.addForm) {
        this.$refs.addForm.clearValidate()
      }
    },

    // 提交添加
    async handleAddSubmit() {
      try {
        await this.$refs.addForm.validate()
        this.addLoading = true

        const userId = this.$store.state.user.id
        Logger.log('添加银行卡使用的用户ID:', userId)

        if (!userId) {
          this.$message.error('用户信息异常，请先访问银行卡页面获取用户信息')
          return
        }
        const params = {
          bankName: this.addForm.bankName,
          cardNo: this.addForm.cardNumber.replace(/\s/g, ''), // 去除银行卡号中的空格，字段名改为cardNo
          name: this.addForm.cardHolder, // 字段名改为name
          cardType: this.addForm.cardType, // 卡类型
          bankBranch: this.addForm.bankBranch, // 开户行
          userId: userId
        }

        Logger.log('=== 提交添加银行卡 ===')
        Logger.log('请求参数:', params)

        const response = await addBankCard(params)

        Logger.log('=== 添加银行卡API响应 ===')
        Logger.log('响应数据:', response.data)

        if (response.code === 0) {
          this.$message.success('银行卡添加成功')
          this.addDialogVisible = false
          this.loadData()
        } else {
          this.$message.error('添加失败: ' + (response.data?.msg || '未知错误'))
        }
      } catch (error) {
        Logger.error('=== 添加银行卡失败 ===')
        Logger.error('错误信息:', error)
        this.$message.error('添加失败，请重试')
      } finally {
        this.addLoading = false
      }
    },

    // 提交编辑
    async handleEditSubmit() {
      try {
        await this.$refs.editForm.validate()
        this.editLoading = true

        const userId = this.$store.state.user.id
        Logger.log('编辑银行卡使用的用户ID:', userId)

        if (!userId) {
          this.$message.error('用户信息异常，请先访问银行卡页面获取用户信息')
          return
        }
        const params = {
          id: this.editForm.id,
          bankName: this.editForm.bankName,
          cardNo: this.editForm.cardNumber.replace(/\s/g, ''), // 去除银行卡号中的空格，字段名改为cardNo
          name: this.editForm.cardHolder, // 字段名改为name
          cardType: this.editForm.cardType, // 卡类型
          bankBranch: this.editForm.bankBranch, // 开户行
          userId: userId
        }

        Logger.log('=== 提交编辑银行卡 ===')
        Logger.log('请求参数:', params)

        const response = await editBankCard(params)

        Logger.log('=== 编辑银行卡API响应 ===')
        Logger.log('响应数据:', response.data)

        if (response.code === 0) {
          this.$message.success('银行卡信息更新成功')
          this.editDialogVisible = false
          this.loadData()
        } else {
          this.$message.error('更新失败: ' + (response.data?.msg || '未知错误'))
        }
      } catch (error) {
        Logger.error('=== 编辑银行卡失败 ===')
        Logger.error('错误信息:', error)
        this.$message.error('更新失败，请重试')
      } finally {
        this.editLoading = false
      }
    },

    // 刷新数据
    refreshData() {
      this.$message.success('数据已刷新')
      this.loadData()
    },

    // 调试用户信息
    debugUserInfo() {
      Logger.log('=== 调试用户信息 ===')
      Logger.log('Store状态:', this.$store.state)
      Logger.log('用户信息:', this.$store.state.user)
      Logger.log('用户ID:', this.$store.state.user.id)
      Logger.log('用户类型:', this.$store.state.user.userType)
      Logger.log('用户手机:', this.$store.state.user.userPhone)
      Logger.log('Token:', this.$store.state.user.token)

      // 尝试手动调用API - 使用真实用户ID
      const userId = this.$store.state.user.id
      Logger.log('=== 手动调用银行卡详情API ===')
      Logger.log('使用用户ID:', userId)

      if (!userId) {
        Logger.log('❌ Store中未找到用户ID')
        this.$message.error('用户信息异常，请重新登录')
        return
      }

      // 先测试新的便捷接口（暂时注释掉，因为接口超时）
      Logger.log('=== 测试当前用户账户API（暂时跳过） ===')
      // getCurrentAccount().then(response => {
      //   Logger.log('当前账户API响应:', response)
      //   if (response.code === 0 && response.data) {
      //     Logger.log('获取到的用户ID:', response.data.userId)
      //     Logger.log('账户余额:', response.data.balance)
      //     Logger.log('积分余额:', response.data.pointBalance)
      //   } else {
      //     Logger.log('❌ 当前账户API返回数据格式错误:', response.data)
      //   }
      // }).catch(error => {
      //   Logger.error('当前账户API错误:', error)
      // })

      Logger.log('=== 测试银行卡API ===')
      const testUserId = this.$store.state.user.id || localStorage.getItem('aggregation-userId')
      if (testUserId) {
        getBankCardDetail(testUserId).then(response => {
          Logger.log('银行卡API响应:', response)
          this.$message.success('API调用成功，请查看控制台')
        }).catch(error => {
          Logger.error('银行卡API错误:', error)
          this.$message.error('API调用失败，请查看控制台')
        })
      } else {
        Logger.log('❌ 无用户ID，无法测试银行卡API')
        this.$message.error('无用户ID，无法测试银行卡API')
      }

      this.$message.info('调试信息已输出到控制台')
    },

    // 格式化卡号显示
    formatCardNumber(cardNumber) {
      if (!cardNumber) return ''
      const cleaned = cardNumber.replace(/\s/g, '')
      return cleaned.replace(/(.{4})/g, '$1 ').trim()
    },

    // 格式化卡号输入
    formatCardNumberInput(value) {
      // 移除所有非数字字符
      const cleaned = value.replace(/\D/g, '')
      // 每4位添加一个空格
      const formatted = cleaned.replace(/(.{4})/g, '$1 ').trim()
      this.addForm.cardNumber = formatted
      this.editForm.cardNumber = formatted
    },

    // 切换卡号显示
    toggleCardNumberVisibility() {
      this.showFullCardNumber = !this.showFullCardNumber
    },

    // 掩码卡号显示
    maskCardNumber(cardNumber) {
      if (!cardNumber) return ''
      const cleaned = cardNumber.replace(/\s/g, '')
      if (cleaned.length <= 4) {
        return '*'.repeat(cleaned.length)
      }
      // 只显示后4位，前面用*代替
      const lastFour = cleaned.slice(-4)
      const masked = '*'.repeat(cleaned.length - 4) + lastFour
      // 每4位添加一个空格
      return masked.replace(/(.{4})/g, '$1 ').trim()
    },

  }
}
</script>

<style scoped>
.bank-card {
  padding: 20px;
}

.page-title {
  font-size: 18px;
  font-weight: bold;
  color: #303133;
}

.header-actions {
  float: right;
}

.add-btn {
  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
  border: none;
  border-radius: 8px;
  padding: 10px 20px;
  box-shadow: 0 4px 15px rgba(102, 126, 234, 0.3);
  transition: all 0.3s ease;
  margin-right: 10px;
}

.add-btn:hover {
  transform: translateY(-2px);
  box-shadow: 0 6px 20px rgba(102, 126, 234, 0.4);
}

.edit-btn {
  background: linear-gradient(135deg, #e6a23c 0%, #f7ba2a 100%);
  border: none;
  border-radius: 8px;
  padding: 10px 20px;
  box-shadow: 0 4px 15px rgba(230, 162, 60, 0.3);
  transition: all 0.3s ease;
  margin-right: 10px;
}

.edit-btn:hover {
  transform: translateY(-2px);
  box-shadow: 0 6px 20px rgba(230, 162, 60, 0.4);
}

.refresh-btn {
  background: linear-gradient(135deg, #56ab2f 0%, #a8e6cf 100%);
  border: none;
  border-radius: 8px;
  padding: 10px 20px;
  box-shadow: 0 4px 15px rgba(86, 171, 47, 0.3);
  transition: all 0.3s ease;
}

.refresh-btn:hover {
  transform: translateY(-2px);
  box-shadow: 0 6px 20px rgba(86, 171, 47, 0.4);
}

.debug-btn {
  background: linear-gradient(135deg, #909399 0%, #c0c4cc 100%);
  border: none;
  border-radius: 8px;
  padding: 10px 20px;
  box-shadow: 0 4px 15px rgba(144, 147, 153, 0.3);
  transition: all 0.3s ease;
}

.debug-btn:hover {
  transform: translateY(-2px);
  box-shadow: 0 6px 20px rgba(144, 147, 153, 0.4);
}

.bank-card-display {
  margin-bottom: 20px;
}

.card-container {
  margin-bottom: 30px;
}

.bank-card-item {
  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
  border-radius: 12px;
  padding: 25px;
  color: white;
  box-shadow: 0 8px 32px rgba(102, 126, 234, 0.3);
  position: relative;
  overflow: hidden;
}

.bank-card-item::before {
  content: '';
  position: absolute;
  top: -50%;
  right: -50%;
  width: 100%;
  height: 100%;
  background: radial-gradient(circle, rgba(255,255,255,0.1) 0%, transparent 70%);
  pointer-events: none;
}

.card-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 20px;
}

.bank-logo {
  font-size: 32px;
  opacity: 0.9;
}

.bank-name {
  font-size: 18px;
  font-weight: bold;
  flex: 1;
  margin-left: 15px;
}

.card-type {
  background: rgba(255, 255, 255, 0.2);
  padding: 4px 12px;
  border-radius: 20px;
  font-size: 12px;
}

.card-number {
  font-size: 24px;
  font-weight: bold;
  letter-spacing: 2px;
  margin-bottom: 20px;
  font-family: 'Courier New', monospace;
}

.card-footer {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.card-holder {
  font-size: 14px;
}

.card-holder .label {
  opacity: 0.8;
}

.card-holder .value {
  font-weight: bold;
}


.card-details {
  background: #f8f9fa;
  border-radius: 8px;
  padding: 20px;
}

.card-details h3 {
  color: #409eff;
  margin-bottom: 20px;
  padding-bottom: 8px;
  border-bottom: 2px solid #409eff;
}

.detail-item {
  margin-bottom: 15px;
  display: flex;
  align-items: center;
}

.detail-item label {
  font-weight: bold;
  min-width: 100px;
  color: #606266;
}

.detail-item span {
  color: #303133;
}

.card-number-full {
  font-family: 'Courier New', monospace;
  font-weight: bold;
  color: #409eff;
}

.no-card-tip {
  text-align: center;
  padding: 60px 20px;
}

.tip-content {
  max-width: 400px;
  margin: 0 auto;
}

.tip-icon {
  font-size: 64px;
  color: #c0c4cc;
  margin-bottom: 20px;
}

.tip-content h3 {
  color: #606266;
  margin-bottom: 10px;
}

.tip-content p {
  color: #909399;
  margin-bottom: 30px;
}
</style>
